<script setup lang='ts'>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import { getXyld } from "../api";
let warp = ref("");
const data = [
  { label: "一月", popularity: 5298, ppearance_rate: 3985 },
  { label: "二月", popularity: 1688, ppearance_rate: 3658 },
  { label: "三月", popularity: 1688, ppearance_rate: 3658 },
  { label: "四月", popularity: 1688, ppearance_rate: 3658 },
];
const XData = data.map((item) => item.label);
const YData1 = data.map((item) => item.popularity);
const YData2 = data.map((item) => item.ppearance_rate);
var option = ref(
  (option = {
    //你的代码
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      show: true,
      top: 20,
      right: 20,
      textStyle: {
        color: "#32C5FF",
      },
    },
    grid: {
      top: 75,
      left: 100,
      bottom: 50,
      right: 20,
    },

    xAxis: {
      type: "category",
      data: XData,
      axisTick: {
        alignWithLabel: true,
      },
      // 字体样式
      axisLabel: {
        fontSize: 16, // 字体大小
        color: "#66FFFF", // 字体颜色
      },
    },
    yAxis: {
      type: "value",
      axisLabel: {
        color: "#66FFFF", // 字体颜色
      },
      // 网格线样式
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(102,255,255,.5)", // 线颜色
          width: 1, // 线宽
          type: "solid", // 线类型
        },
      },
    },
    series: [
      {
        name: "昨日外来访客",
        data: YData1,
        type: "bar",
        barWidth: 24,
        itemStyle: {
          normal: {
            show: true,
            barBorderRadius: [15, 15, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#fcaf17",
              },
              {
                offset: 1,
                color: "#ef4136",
              },
            ]),
          },
        },
      },
      {
        name: "今日外来访客",
        data: YData2,
        type: "bar",
        barWidth: 24,
        itemStyle: {
          normal: {
            barBorderRadius: [15, 15, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#ef5b9c",
              },
              {
                offset: 1,
                color: "#6950a1",
              },
            ]),
          },
        },
      },
    ],
  })
);
let myChart;
onMounted(async() => {
  let res = await getXyld()
  console.log(res,'校园流动');
   
  myChart = echarts.init(warp.value);
  option && myChart.setOption(option.value);
});
window.addEventListener("resize", function () {
  myChart.resize();
});
</script>
<template>
  <div ref="warp" style="width: 100%x; height: 230px"></div>
</template>

<style></style>